<script setup lang="ts">
import { useClipboard } from '@vueuse/core'
import { toRef } from 'vue';

const props = defineProps<{text:string}>();
const v = toRef(props,'text')
//
const { copy, copied, isSupported } = useClipboard()


</script>

<template>
<div class="box-copy w-full h-full relative cursor-pointer"  @click="() => isSupported && copy(v)">
    <div v-if="isSupported" title="点击可复制文本" class="icon op-0 absolute top-4px right-4px p-4px rd-4px z-100 c-#999 b-#e2e2e3 b-1px b-solid box-border bg-#88888811 ">
        <div v-if="copied"  class="i-iconamoon:file-check-light w-1em h-1em c-#67c23a" ></div>
        <div v-else class="i-fluent:document-20-regular w-1em h-1em"  ></div>
    </div>
    <slot></slot>
</div>
</template>

<style scoped>
.box-copy {
    &:hover{
        > .icon {
            opacity: 1;
            background: #88888811;
        }
    }
}
</style>